<template>
  <div class="coupon-container">
    <a :href="couponUrl" target="_blank">
      <div class="coupon">
        <span class="label">券</span>
        <span class="coupon-value">{{ "满" + quota + "减" + discount }}</span>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  props: {
    couponUrl: {
      type: String,
      default: () => {
        return "";
      },
      required: true,
    },
    quota: {
      type: [String, Number],
      default: () => {
        return "";
      },
      required: true,
    },
    discount: {
      type: [String, Number],
      default: () => {
        return "";
      },
      required: true,
    },
  },
};
</script>

<style lang="less" scoped>
.coupon-container {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 10000;
  transform: translateY(-100%);
  .coupon {
    .label {
      margin-right: 1px;
      display: inline-block;
      width: 20px;
      height: 20px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      line-height: 20px;
      background: linear-gradient(-90deg, #9b74ff, #5f5fff);
      border-radius: 4px;
    }
    .coupon-value {
      display: inline-block;
      font-size: 12px;
      color: #fff;
      padding: 0 8px;
      line-height: 20px;
      border-radius: 4px;
      background: linear-gradient(-90deg, #9b74ff, #5f5fff);
    }
  }
}
</style>